<template>
	<view class="content">
		<view class="title">智慧城市</view>

		<view class="input">
			<span>账号</span> <input type="text" v-model="loginData.username" placeholder="请输入账号" />
		</view>
		<view class="input">
			<span>密码</span> <input type="password" v-model="loginData.password" placeholder="请输入密码" />
		</view>
		<view class="input2">
			<span>自动登录</span>
			<!-- 缩小显示switch组件 -->
			<switch checked="true" style="transform: scale(0.7);" @change="" />
		</view>
		<view class="btn">
			<button type="primary" @tap="login">登录</button>
		</view>
		<view class="register">
			<navigator url="/pages/main/main">注册账号</navigator> | <navigator url="">忘记密码</navigator>
		</view>
       <!-- 底部的微信，微博登录（无图片，用默认图片替代） -->
		<view class="login">
			<image src="../../static/logo.png" mode=""></image>
			<image src="../../static/logo.png" mode=""></image>
			<image src="../../static/logo.png" mode=""></image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"


	const loginData = ref({
		username: "appchen",
		password: "123456"
	})

	async function login() {
		if (loginData.value.username == "" || loginData.value.password == "") {
			uni.showToast({
				icon: "fail",
				title: "请输入用户名和密码"
			})
			return;
		}
		//说明：登录的请求不能携带token，否则会出现403错误，原因未知
		uni.removeStorageSync("token")
		let res = await uni.$post("/prod-api/api/login", loginData.value)
		// let res = await uni.$get("/prod-api/press/category/list" )
		if (res.code == 200) {
			// console.log(res);
			uni.setStorageSync("token", res.token)
			uni.switchTab({
				url: "/pages/main/main"
			})
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f0f0f0;
		position: relative;
		// 设置页面高度，这样的目的是为了底部显示的图标定位
		height: calc(100vh - 50px);
        // 智慧城市标题
		.title {
			text-align: center;
			background-color: #fff;
			padding: 10px;
			border: 1px solid red;
			font-weight: bold;
		}
         // 账号和密码文本框
		.input,
		.input2 {
			display: flex;
			padding: 10px;
			background-color: #fff;
			margin: 5px 0 5px 0;

			span {
				margin-right: 5px;
			}
		}

		.input2 {
			justify-content: space-between;
			align-items: center;
		}

		.btn {
			margin: 10px;
		}
        // 注册和忘记密码链接
		.register {
			display: flex;
			justify-content: center;

			navigator {
				margin: 5px;
			}
		}
       // 底部的图标
		.login {
			display: flex;
			border: 1px solid red;
			width: 100vw;
			position: absolute;
			bottom: 10px;
			justify-content: center;

			image {
				width: 40px;
				height: 40px;
				margin: 0 10px;
				border-radius: 50%;
			}
		}

	}
</style>